<template>
  <div class="users">
    <el-card>
      <template #header>
        <div class="card-header"><h3>用户管理</h3></div>
      </template>
      <div class="toolbar">
        <el-input v-model="q" placeholder="搜索用户名/邮箱" clearable style="width: 260px" />
      </div>
      <el-table :data="filtered" style="width:100%" size="large">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="username" label="用户名" min-width="160" />
        <el-table-column prop="email" label="邮箱" min-width="200" />
        <el-table-column prop="full_name" label="姓名" min-width="140" />
        <el-table-column prop="role" label="角色" width="120" />
        <el-table-column prop="grade" label="年级" width="100" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="viewHistory(scope.row)">历史记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { http } from '@/api/http'
import { useRouter } from 'vue-router'

const router = useRouter()
const users = ref<any[]>([])
const q = ref('')

onMounted(async () => {
  users.value = await http.get('/users')
})

const filtered = computed(() => {
  const k = q.value.trim().toLowerCase()
  if (!k) return users.value
  return users.value.filter((u:any) =>
    u.username.toLowerCase().includes(k) ||
    u.email.toLowerCase().includes(k)
  )
})

function viewHistory(u: any) {
  router.push({ path: '/history', query: { user_id: u.id } })
}
</script>

<style scoped>
.users { padding: 24px; max-width: 1100px; margin: 0 auto; }
.toolbar { margin-bottom: 12px; }
</style>
